<template>
    <Categories>
        <div id="charts" class="tl-padding-0-15">
            <el-card class="tl-margin-top-20 tl-border-radius-8 tl-width-100-percent">
                <div class="tl-text-center">
                    <el-button-group>
                        <el-button :class="{'active-button': active_name === 'radar'}" @click="handChange('radar')" size="mini" type="primary" plain>雷达图</el-button>
                        <el-button :class="{'active-button': active_name === 'wordCloud'}" @click="handChange('wordCloud')" size="mini" type="primary" plain>分类云</el-button>
                    </el-button-group>
                </div>
                <!-- <el-divider></el-divider>-->
                <div v-show="active_name === 'radar'">
                    <Radar/>
                </div>
                <div v-show="active_name === 'wordCloud'">
                    <WordCloud/>
                </div>
            </el-card>
        </div>
    </Categories>
</template>

<script>
import Categories from '@/views/category/Categories';
import WordCloud from '@/views/category/WordCloud';
import Radar from '@/views/category/Radar';

export default {
    name: 'Charts',
    components: { Categories, WordCloud, Radar },
    data () {
        return {
            active_name: 'radar',
            cate: [],
            radarChart: null,
            wordCloudChart: null
        }
    },
    methods: {
        handChange (name) {
            this.active_name = name
        }
    },
    created () {
    }
}
</script>

<style lang='less' scoped>
@import "~@/assets/css/variables";

.active-button {
    color: #fff;
    background-color: @base-color-default;
    border-color: @base-color-default;
}
</style>
